<!-- 顶部文字切换 -->
<template>
    <div class="TopTextSwitchingBox" :style="{ width: typeof width === 'number' ? `${width}px` : width }">
        <div class="TopTextSwitching_text" v-for="(item, index) in TopTextList" :key="index"
            @click="tabsFun(item.text)">
            <span :class="item.text === store.tabType ? 'TopTextSwitching_xzType' : ''">{{ item.text }}</span>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();
import { useStore } from '@/store/store';
const store = useStore()
defineProps({
    width: {
        type: [String, Number],
        default: '100%'  // 支持字符串或数值类型
    },
});

const TopTextList = ref([
    {
        id: 1,
        text: '首页'
    },
    {
        id: 2,
        text: '新闻动态'
    },
    {
        id: 3,
        text: '企业信息'
    },
    {
        id: 4,
        text: '金融信息'
    },
    {
        id: 5,
        text: '供需信息'
    },
    {
        id: 6,
        text: '商城入口'
    },
    {
        id: 7,
        text: '展会大厅'
    },
    {
        id: 8,
        text: '农业画像'
    },
]); // 顶部文字列表

const tabsFun = (text) => {
    if (text === '农业画像') {
        router.push({
            path: '/YiNongsInsight',
            query: {}
        });
        return;
    }
    store.setTabType(text)
}
</script>

<style scoped lang="scss">
.TopTextSwitchingBox {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 auto;
    padding: 16px 0;
}

.TopTextSwitching_text {
    font-weight: bold;
    font-size: 16px;
    color: #1F1F1F;
    padding: 14px 0;
    cursor: pointer;
    transition: color 0.3s ease; // 添加过渡效果

    &:hover {
        color: $green-color; // 使用项目主题绿色
        // 或使用固定颜色值：#2B893A
    }
}

.TopTextSwitching_xzType {
    color: $button-color;
}
</style>